<div #advancedFilter>
  <lv-advanced-filter
    [lvFields]="fields"
    [lvCustomButton]="saveFilter"
    lvFilterPanelType="tree"
    [lvTreeFiltersHeader]="customFilterTree"
  ></lv-advanced-filter>
</div>

<ng-template #saveFilter>
  <button
    lv-button
    lv-popover
    (click)="onSaveFilter($event)"
    lvType="link"
    lvSize="auto"
    [lvPopoverContent]="saveFilterPop"
    [lvPopoverOrigin]="advancedFilter"
    lvPopoverPosition="bottomRight"
    [lvPopoverShowArrow]="false"
    lvPopoverTrigger="customize"
    [(lvPopoverVisible)]="saveFilterPopVisible"
    style="margin-right: 16px"
  >
    保存筛选
  </button>
</ng-template>

<ng-template #saveFilterPop>
  <div class="filter-save">
    <span class="filter-save-title">自定义筛选名称</span>

    <lv-form-control
      class="filter-save-input"
      [lvErrorTip]="{ required: '自定义筛选名称不能为空', maxlength: '自定义筛选名称长度不能超过15' }"
    >
      <lv-input-group [lvSuffix]="labelSuffixTpl">
        <input #filterInput lv-input [formControl]="filterSaveName" />
      </lv-input-group>
    </lv-form-control>

    <div class="filter-save-button-container">
      <button class="filter-save-button" (click)="onSaveFilterCancel()" lv-button>取消</button>
      <button class="filter-save-button" (click)="onSaveFilterConfirm()" lv-button lvType="primary">确定</button>
    </div>
  </div>
</ng-template>

<ng-template #labelSuffixTpl>
  <span>{{ filterSaveName?.value?.length || 0 }}</span>
  <span>/{{ filterSaveLimit }}</span>
</ng-template>

<ng-template #customFilterTree>
  <lv-tree
    *ngIf="customFiltersTreeData?.length"
    [lvData]="customFiltersTreeData"
    [lvNodeTemplate]="nodeTpl"
    lvBlockNode
    [lvSelectionAssociate]="false"
    [lvShowExpandedIcon]="{ expandIcon: 'lv-icon-arrow-down', collapseIcon: 'lv-icon-arrow-right' }"
    (lvClick)="onTreePanelClick($event)"
  ></lv-tree>
</ng-template>

<ng-template #nodeTpl let-item>
  <div class="filter-save-tree">
    <span lv-overflow>{{ item.label }}</span>
    <div *ngIf="item?.isLeaf" class="filter-save-tree-icon">
      <i
        [lv-icon]="starCustomFiltersName === item.label ? 'lv-icon-star-solid' : 'lv-icon-star'"
        (click)="handleCustomFilterStar($event, item.label)"
        [lv-tooltip]="starCustomFiltersName === item.label ? '取消收藏模板' : '收藏模板，下次将默认使用'"
        lvTooltipPosition="right"
      ></i>
      <i lv-icon="lv-icon-close" (click)="handleCustomFilterDelete($event, item.label)"></i>
    </div>
  </div>
</ng-template>
